<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .lunbo {
            width: 730px;
            height: 454px;
            margin: auto;
            background: #000;
            position: relative;
            overflow: hidden;
        }

        .lunbo a {
            display: inline-block;
            width: 3650px;
            height: 454px;
            position: absolute;
        }

        .lunbo ul {
            width: 200px;
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-align: center;
            position: absolute;
            left: 265px;
            bottom: 20px;
        }

        .lunbo ul li {
            width: 18px;
            height: 18px;
            float: left;
            border: 1px solid #fff;
            border-radius: 9px;
            color: #fff;
            background: rgb(102, 102, 102);
            margin: 0 5px;
            font-size: 14px;
            cursor: pointer;
        }

        .back,
        .next {
            width: 30px;
            height: 60px;
            background: rgb(127, 127, 127, 0.5);
            color: #fff;
            text-align: center;
            line-height: 60px;
            font-size: 20px;
            position: absolute;
            top: 197px;
            cursor: pointer;
        }

        .back {
            left: 5px;
        }

        .next {
            right: 5px;
        }
    </style>
</head>

<body>
    <!-- 轮播图 -->
    <div class="lunbo">
        <!-- 图片容器 -->
        <a href="#">
            <img src="imgs/5690b6dcNd5aaa0f0.jpg" alt=""><img src="imgs/5698a5aaN08e09475.jpg" alt=""><img
                src="imgs/56a05078N6add136b.jpg" alt=""><img src="imgs/5698a5aaN08e09475 - 副本.jpg" alt=""><img
                src="imgs/56a09e6aN373313d9.jpg" alt="">
        </a>
        <!--指示器 -->
        <ul>
            <li style="background: #cc0000;">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <!-- 翻页器 -->
        <div class="back">
            &lt;
        </div>
        <div class="next">
            &gt;
        </div>
    </div>

    <script>
        let lunbo = document.querySelector(".lunbo");
        let lis = document.querySelectorAll(".lunbo ul li");
        let img = document.querySelector(".lunbo a");
        let i = 0;
        let back = document.querySelector(".back");
        let next = document.querySelector(".next");

        function left() {
            i++;
            if (i == lis.length) {
                i = 0;
            }
            go();
        }

        function go() {
            img.style.left = i * -730 + "px";
            for (z = 0; z < lis.length; z++) {
                lis[z].style.background = "#666";
            }
            lis[i].style.background = "#c00";
        }

        t = setInterval("left()", 1000);

        // 鼠标悬停到轮播图上暂停
        lunbo.addEventListener("mouseover", function () {
            clearInterval(t);
        });
        lunbo.addEventListener("mouseout", function () {
            t = setInterval("left()", 1000);
        });

        // 鼠标点击翻页器翻页
        back.addEventListener("click", function () {
            if (i == 0) {
                i = lis.length - 1;
            } else {
                i--;
            }
            go();
        });
        next.addEventListener("click", function () {
            if (i == lis.length - 1) {
                i = 0;
            } else {
                i++;
            }
            go();
        });

        // 方法一
        for (let j = 0; j < lis.length; j++) {      //for循环给每一个li绑定事件
            //    console.log(j);
            lis[j].addEventListener("mouseover", function () {
                // let source = event.target;       //测试当前事件是否被点击事件
                // let parent = source.parentElement;
                // console.log(source);             //输出测试结果
                // console.log(parent);
                
                //    for (g = 0; g < lis.length; g++) {
                //        lis[g].style.background = "#666";
                //    }
                // source.style.background = "#c00";
                //    lis[j].style.background = "#c00";
                //    img.style.left = j * -730 + "px";
                //    console.log(img.style.left);
                i = j;                  //把当前被点击元素的下标赋给i
                go();
            });
        }

        //   方法二 
        /* let ul = document.querySelector(".lunbo ul");
        ul.addEventListener("mouseover", function (e) {     //e.target获得父元素当前被点击的子元素
            if (e.target.nodeName == "LI")      //判断被点击的是不是li，监听器在ul上，所以鼠标可能会移到ul上
            {
                // console.log(e.target);
                i = e.target.innerText - 1;     //获取li文本-1（li文本从1开始，i从0开始）赋给i
                go();
            }
        }); */
    </script>
</body>

</html>